{% include 'QLGL/QLGL_index.html' %}

<div class="am-cf admin-main">
  {% include 'sidebar.html' %}
  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">巡检业务</strong></div>
      </div>
      <div class="am-g" style="position: absolute;height: 100%;right: 0px;left: 260px;width: auto;">

        {% include 'QLGL/XJYW/QLGL_XJYW_SIDEBAR.html' %}

        <div class="am-u-sm-10" style="position: absolute;width:auto;right:0;left: 200px;overflow-y: scroll;bottom: 100px;top: 0px;">
          <!-- <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">天气情况</strong></div> -->
          <div class="am-g am-margin-top am-form-group">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">维护详情</strong></div>
          </div>

          <div class="am-g am-margin-top am-form-group">
            <div class="am-u-sm-4 am-u-md-3 am-text-right">巡查内容：</div>
            <div class="am-u-sm-8 am-u-md-9" style="padding-left: 0rem;">
              <select data-am-selected="{btnSize: 'sm'}" id='selCheckItem' name='selCheckItem' required="">
                <option value="-1">--选择内容--</option>
                {% for i in dcitems %}
                <option value="{{ i.id }}">{{ i.name }}</option>
                {% endfor %}
              </select>

            </div>

          </div>
          <hr/>
          <div class="am-g am-margin-top">
            <div class="am-u-sm-4 am-u-md-3 am-text-right">紧急程度：</div>
            <label class="am-radio-inline">
              <input type="radio" name="urgencylevel" value="3" data-am-ucheck> 紧急
            </label>
            <label class="am-radio-inline">
              <input type="radio" name="urgencylevel" value="2" data-am-ucheck> 一般
            </label>
            <label class="am-radio-inline">
              <input type="radio" name="urgencylevel" value="1" data-am-ucheck> 另处
            </label>
          </div>

          <hr/>
          <div class="am-g am-margin-top am-form-group">
            <div class="am-u-sm-4 am-u-md-3 am-text-right">病害详情：</div>
            <div class="am-u-sm-8 am-u-md-9" style="padding-left: 0rem;">
              <select data-am-selected="{btnSize: 'sm'}" id='selDisease' name='selDisease'></select>
            </div>

          </div>
          <hr/>
          <div class="am-g am-margin-top am-form-group">
            <div class="am-u-sm-4 am-u-md-3 am-text-right">桩号位置：</div>
            <select data-am-selected="{btnSize: 'sm'}" id='selPileDirection' name='selPileDirection' required="">
              <option value="CT">CT</option>
              <option value="TC">TC</option>
            </select>
          </div>
          <hr/>
          <div class="am-g am-margin-top am-form-group">
            <div class="am-u-sm-4 am-u-md-3 am-text-right">桩号千米：</div>
            <div class="am-u-sm-8 am-u-md-9 am-u-end" style="padding-left: 0px;">
              <input type="text" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" class="am-input-xl" id='btnpilekm' name='btnpilekm' required="">
            </div>
          </div>
          <hr/>
          <div class="am-g am-margin-top am-form-group">
            <div class="am-u-sm-4 am-u-md-3 am-text-right">桩号米：</div>
            <div class="am-u-sm-8 am-u-md-9 am-u-end" style="padding-left: 0px;">
              <input type="text" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" class="am-input-xl" id='btnpilem' name='btnpilem' required="" min="0" max="999">
            </div>
          </div>
          <hr/>
          <div class="am-g am-margin-top am-form-group">
            <div class="am-u-sm-4 am-u-md-3 am-text-right">备注信息：</div>
            <div class="am-u-sm-8 am-u-md-9 am-u-end" style="padding-left: 0px;">
              <textarea rows="3" placeholder="请输入备注信息" id='txtRemark' name='txtRemark' required=""></textarea>
            </div>
          </div>
          <hr/>
          <div class="am-g am-margin-top">
            <div class="am-u-sm-4 am-u-md-3 am-text-right">媒体信息：</div>
            <input style="width:100px;height:36px;position:absolute;top:338px;left:942px;z-index: 1;opacity: 0;" name="myfile" id="f_fileXC" type="file" accept="image/*" multiple />
            <label>
                  <input id="XCXC" class="am-btn am-btn-primary am-btn-xs" type="button" value="拍照/相册" />
                </label>
          </div>
          <div class="am-g am-margin-top am-form-group">
            <ul class="am-avg-sm-2 am-avg-md-4 am-avg-lg-6 am-margin gallery-list" id='show'>
              <li></li>
            </ul>
          </div>
          <hr/>
          <div class="am-g am-margin-top am-form-group">
            <button class="am-btn am-btn-primary am-btn-xs" id='btnSeve' style="margin-left: 25%"  onclick="fromValid()">提交</button>
           </div>
        </div>
      </div>
      
      <div class="am-g am-margin-top am-form-group">
        <input type="hidden" name='txtTemperature' id='txtTemperature'>
        <input type="hidden" name='txtWeather' id='txtWeather'>
        <input type="hidden" name='txtTaskId' id='txtTaskId'>
        <input type="hidden" name='txtFileId' id='txtFileId'>
        <input type="hidden" name='hidurgencylevel' id='hidurgencylevel'>
        <input type="hidden" name='hidpilekm' id='hidpilekm'>
        <input type="hidden" name='hidpilem' id='hidpilem'>
        <input type="hidden" name='hidtasktype' id='hidtasktype' value=1>
      </div>


    </div>
  </div>
</div>
</div>
</div>
{% include 'footer.html' %}
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/static/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="/static/assets/js/amazeui.min.js"></script>
<script src="/static/assets/js/amazeui.tree.js"></script>
<script type="text/javascript" src="/static/assets/js/layer.js"></script>
<script src="/static/assets/datatables/amazeui.datatables.min.js"></script>
<script src="/static/assets/dialog/amazeui.dialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/assets/css/amazeui.tree.css" />
<script src="/static/assets/js/app.js"></script>
<style type="text/css">
  .li_a {
    color: #5c5c5c;
  }
</style>
<script type="text/javascript">
  $("#collapse-nav1").addClass("am-in");
  $("#qlgl").removeClass("am-collapsed");
  $("#qlglOxjyw").css("color", "#3399CC");
  $("#qlgl").css("color", "#3399CC");
  $("#xjywOrcxc").removeClass("li_a");

  $.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
  });
  var diseaseinfo = {{ diseaseinfo|safe }};
  $(window).load(function() {
    init();

  });

  var init = function() {
    //存储信息
    $('#txtTemperature').val({{ temperature }});
    $('#txtWeather').val('{{ weather }}');
    $('#txtTaskId').val({{ taskid }});
    if(diseaseinfo[0]) {
      //console.log(diseaseinfo[0]);
      //绑定数据
      var item = diseaseinfo[0]
      var urgency_level = item.urgency_level;
      var param_partol_id = item.param_partol_id;
      var param_name = item.param_name;
      var disease_id = item.disease_id;
      var disease_name = item.disease_name;
      var pile_direction = item.pile_direction;
      var pile_km = item.pile_km;
      var pile_m = item.pile_m;
      var checkitem = $("#selCheckItem");
      var disease = $("#selDisease");
      var piledir = $("#selPileDirection");
      selectedOptions(checkitem, param_partol_id, param_name);
      console.log(param_name + '-' + disease_name);
      $("input[name='urgencylevel'][value='" + urgency_level + "']").attr("checked", true);
      $("input[name='urgencylevel']").attr("disabled", "disabled")
      $("#hidurgencylevel").val(urgency_level)
      setTimeout(function() {
        selectedOptions(disease, disease_id, disease_name);
      }, 1000);

      selectedOptions(piledir, pile_direction, pile_direction);
      checkitem.selected('disable');
      disease.selected('disable');
      piledir.selected('disable');
      $("#btnpilekm").val(pile_km).attr("disabled", "disabled");
      $("#btnpilem").val(pile_m).attr("disabled", "disabled");
      $("#hidpilekm").val(pile_km)
      $("#hidpilem").val(pile_m)
      // 默认类型为巡查任务状态为1，如果有病害信息，肯定为维护任务，状态为2
      $("#hidtasktype").val('2')

    }
  }

  var selectedOptions = function(obj, key, value) {
    if(obj) {
      obj.empty();
      obj.append("<option value='" + key + "'>" + value + "</option>");
    }
  }

  var test = function() {
    alert($('#txtTaskId').val());
  }

  $('#selCheckItem').change(function() {
    var itmeId = $(this).children('option:selected').val();
    var sel = $('#selDisease');
    sel.empty();
    if(itmeId == -1) return;
    $.ajax({
      "url": '/checkItemDetailJson/?cid=' + itmeId,
      "datatype": "json",
      "type": "get",
      "success": function(result) {
        if(result.status == 1) {

          var data = eval(result.data);
          $.each(data, function(i, item) {
            sel.append("<option value='" + item.disease_id + "'>" + item.disease_name + "</option>");
          });
        } else {
          console.log('error')
        }
      },
      "error": function(err, result) {
        if(err.length != 0) {
          console.log(result);
          return;
        }
      }
    });
  })

  var upimg = document.querySelector('#f_fileXC');
  upimg.addEventListener('change', function(e) {
    var files = this.files;
    if(files.length) {
      if(checkFile(files)) {
        uploadFiles(files);
      }
    }
  });

  function checkFile(files) {
    for(var i = 0; i < files.length; i++) {
      // console.log(files[i].type);
      if(!files[i].type.match(/.jpg|.jpeg|.gif|.png|.bmp/)) { //判断上传文件格式
        AlertMSG('上传的图片格式不正确')
        return false;
      }
    }
    return true;
  }

  $("#XCXC").click(function() {
    $("#f_fileXC").click();
  })

  var fromValid = function() {
    var flag = false;
    var msg = '';

    var dcitem = $('#selCheckItem').children('option:selected').val();
    var dcdisease = $('#selDisease').children('option:selected').val();
    var pilem = $('#btnpilem').val();
    var urgencylevel = $("input:radio[name='urgencylevel']:checked").val();

    if(dcitem * 1 < 1) {
      msg = '请选择检查内容';
      flag = false;
    } else if(isNaN(urgencylevel)) {
      msg = '请选择紧急程度'
      flag = false;
    }  else if(isNaN(dcdisease)) {
      msg = '请选择病害详情'
      flag = false;
    } else if(pilem < 0 || pilem > 999) {
      msg = '桩号米只能在0~999之间，请重新填写'
      flag = false;
    } else {
      msg = '';
      flag = true;
    }
    if(msg != '') {
      AlertMSG(msg);
    }

    if(flag == true){
      var selCheckItem = $("#selCheckItem option:selected").val();
      var urgencylevel = $("input:radio[name='urgencylevel']:checked").val();
      var selDisease = $("#selDisease option:selected").val();
      var selPileDirection = $("#selPileDirection option:selected").val();
      var btnpilekm = $("#btnpilekm").val();
      var btnpilem = $("#btnpilem").val();
      var txtRemark = $("#txtRemark").val();
      var txtTemperature = $("#txtTemperature").val();
      var txtWeather = $("#txtWeather").val();
      var txtTaskId = $("#txtTaskId").val();
      var txtFileId = $("#txtFileId").val();
      var hidurgencylevel = $("#hidurgencylevel").val();
      var hidpilekm = $("#hidpilekm").val();
      var hidpilem = $("#hidpilem").val();
      var hidtasktype = $("#hidtasktype").val();

      $.ajax({
      "url":"/DCSave/",
      "data":{"selCheckItem":selCheckItem,"urgencylevel":urgencylevel,"selDisease":selDisease,"selPileDirection":selPileDirection,"btnpilekm":btnpilekm,"btnpilem":btnpilem,"txtRemark":txtRemark,"txtTemperature":txtTemperature,"txtWeather":txtWeather,"txtTaskId":txtTaskId,"txtFileId":txtFileId,"hidurgencylevel":hidurgencylevel,"hidpilekm":hidpilekm,"hidpilem":hidpilem,"hidtasktype":hidtasktype},
      "datatype":"json",
      "type":"post",
      "async":"false"
      }).success(function(data){
        if (data.status == 1) {
          alert("保存成功！")
          
          window.location='/QLXJ_XJYW_RCJC/'


        } else {
          AlertMSG(data.message)
        }
      }).error(function(data){
        AlertMSG("保存失败！")
      });
    }
   
  }
  var uploadFiles = function(files) {
    var form_data = new FormData();
    for(var i = 0; i < files.length; i++) {
      form_data.append("myfile", files[i]);
    }
    // 提交ajax的请求

    $.ajax({
      url: "/uploadFile_XC/",
      type: 'POST',
      data: form_data,
      processData: false, // tell jquery not to process the data
      contentType: false, // tell jquery not to set contentType
      success: function(result) {
        //console.log(result.data)
        if(result.status == 1) {
          var show = $("#show");
          // show.css("display","block");
          var html = '',
            ids = '';
          var fileIds = $('#txtFileId');
          for(var i = 0; i < result.data.length; i++) {
            var f = result.data[i];
            html += '<li><img class="am-img-thumbnail am-img-bdrs" src="' + f.file_url + '" alt="img"></li>';
            ids += f.file_id + '|'
            // console.log(f.file_url);
          }
          fileIds.val(ids);
          show.html(html);
        }
      }
    });
  }

  var AlertMSG = function(msg) {
    AMUI.dialog.alert({
      title: '错误提示',
      content: msg,
      onConfirm: function() {
        console.log('close');
      }
    });
  }
</script>

</body>

</html>